<template>
	<div>
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{axisName}}{{getLangText(label.axis)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div v-if="isShow">
			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>{{getLangText(label.axis)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="axis.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.position)}}</label>
					<md-select v-model="axis.position " v-if="axisName=='X'">
						<md-option value></md-option>
						<md-option value="top">{{getLangText(label.top)}}</md-option>
						<md-option value="bottom">{{getLangText(label.bottom)}}</md-option>
					</md-select>
					<md-select v-model="axis.position " v-if="axisName=='Y'">
						<md-option value></md-option>
						<md-option value="top">{{getLangText(label.left)}}</md-option>
						<md-option value="bottom">{{getLangText(label.right)}}</md-option>
					</md-select>
				</md-field>
				<md-field>
					<label>{{getLangText(label.offset)}}</label>
					<md-input v-model="axis.offset"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.type)}}</label>
					<md-select v-model="axis.type">
						<md-option value="category">{{getLangText(label.category)}}</md-option>
						<md-option value="value">{{getLangText(label.value)}}</md-option>
					</md-select>
				</md-field>
				<md-field>
					<label>{{getLangText(label.name)}}</label>
					<md-input v-model="axis.name"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.nameGap)}}</label>
					<md-input v-model="axis.nameGap"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.nameRotate)}}</label>
					<md-input v-model="axis.nameRotate"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.nameLocation)}}</label>
					<md-select v-model="axis.nameLocation">
						<md-option value="start">{{getLangText(label.start)}}</md-option>
						<md-option value="center">{{getLangText(label.center)}}</md-option>
						<md-option value="end">{{getLangText(label.end)}}</md-option>
					</md-select>
				</md-field>
				<div class="table-row-item">
					<span>{{getLangText(label.inverse)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="axis.inverse"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>
				<div class="table-row-item">
					<span>{{getLangText(label.boundaryGap)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="axis.boundaryGap"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.min)}}</label>
					<md-input v-model="axis.min"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.max)}}</label>
					<md-input v-model="axis.max"></md-input>
				</md-field>
				<div class="table-row-item">
					<span>{{getLangText(label.scale)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="axis.scale"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.splitNumber)}}</label>
					<md-input v-model="axis.splitNumber"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.minInterval)}}</label>
					<md-input v-model="axis.minInterval"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.maxInterval)}}</label>
					<md-input v-model="axis.maxInterval"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.interval)}}</label>
					<md-input v-model="axis.interval"></md-input>
				</md-field>
			</div>
			<text-style
				:lang-type="langType"
				:text-name="getLangText(label.name)"
				@text-style-result="onTextStyle"
				:option="axis.nameTextStyle"
			></text-style>
			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>{{getLangText(label.axisLine)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="axis.axisLine.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
				<div class="table-row-item">
					<span>{{getLangText(label.onZero)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="axis.axisLine.onZero"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.symbol)}}</label>
					<md-select v-model="axis.axisLine.symbol">
						<md-option value="none">{{getLangText(label.none)}}</md-option>
						<md-option value="arrow">{{getLangText(label.arrow)}}</md-option>
                        <!-- <md-option :value="['none','arrow']">{{getLangText(label.endArrow)}}</md-option> -->
					</md-select>
				</md-field>
				<div style="display:flex;">
					<md-field style="width:135px;display:inline-flex;">
						<label>{{getLangText(label.symbolSize)}}</label>
						<md-input v-model="axis.axisLine.symbolSize[0]"></md-input>
					</md-field>

					<md-field style="width:135px;display:inline-flex;margin-left:8px;">
						<label>{{getLangText(label.symbolSize)}}</label>
						<md-input v-model="axis.axisLine.symbolSize[1]"></md-input>
					</md-field>
				</div>

				
			</div>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.axisLine)"
				@line-style-result="onAxisLine"
				:option="axis.axisLine.lineStyle"
			></line-style>
			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>{{getLangText(label.axisTick)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="axis.axisTick.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
				<div class="table-row-item">
					<span>{{getLangText(label.alignWithLabel)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="axis.axisTick.alignWithLabel"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.tickInterval)}}</label>
					<md-input v-model="axis.axisTick.interval"></md-input>
				</md-field>
				<div class="table-row-item">
					<span>{{getLangText(label.inside)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="axis.axisTick.inside"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.tickLength)}}</label>
					<md-input v-model="axis.axisTick.length"></md-input>
				</md-field>
			</div>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.axisTick)"
				@line-style-result="onAxisTick"
				:option="axis.axisTick.lineStyle"
			></line-style>
			<div style="padding:0 8px;">
				<md-field>
					<label>{{getLangText(label.axisTickLabelInterval)}}</label>
					<md-input v-model="axis.axisLabel.interval"></md-input>
				</md-field>
				<div class="table-row-item">
					<span>{{getLangText(label.axisLabelInside)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="axis.axisLabel.inside"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.axisLabelMargin)}}</label>
					<md-input v-model="axis.axisLabel.margin"></md-input>
				</md-field>
			</div>
			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.axisLabel)"
				@label-style-result="onAxisLabel"
				:option="axis.axisLabel"
			></label-style>
			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>{{getLangText(label.splitLine)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="axis.splitLine.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.splitLineInterval)}}</label>
					<md-input v-model="axis.splitLine.interval"></md-input>
				</md-field>
			</div>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.splitLine)"
				@line-style-result="onSplitLine"
				:option="axis.splitLine.lineStyle"
			></line-style>
			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>{{getLangText(label.splitArea)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="axis.splitArea.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.splitAreaInterval)}}</label>
					<md-input v-model="axis.splitArea.interval"></md-input>
				</md-field>
			</div>
			<area-style
				:lang-type="langType"
				:area-name="getLangText(label.splitArea)"
				@area-style-result="onSplitArea"
				:option="axis.splitArea.areaStyle"
			></area-style>
		</div>
	</div>
</template>
<script>
	import TextStyle from "@/components/comp/TextStyle";
	import LineStyle from "@/components/comp/LineStyle";
	import LabelStyle from "@/components/comp/LabelStyle";
	import AreaStyle from "@/components/comp/AreaStyle";
	export default {
		name: "Axis",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			axisName: {
				type: String,
				default: ""
			},
			axisType: {
				type: String,
				default: "value"
			},
			option: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		components: {
			"text-style": TextStyle,
			"line-style": LineStyle,
			"label-style": LabelStyle,
			"area-style": AreaStyle
		},
		data: () => ({
			label: {
				axis: { zh: "轴", en: " Axis" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },
				position: { zh: "位置", en: "position" },
				top: { zh: "上方", en: "top" },
				bottom: { zh: "下方", en: "bottom" },
				left: { zh: "左侧", en: "left" },
				right: { zh: "右侧", en: "right" },
				offset: { zh: "偏移", en: "offset" },
				type: { zh: "轴类型", en: "type" },
				value: { zh: "数值轴", en: "value" },
				category: { zh: "类目轴", en: "category" },
				name: { zh: "轴名称", en: "name" },
				nameLocation: { zh: "名称位置", en: "nameLocation" },
				start: { zh: "开头", en: "start" },
				center: { zh: "中间", en: "center" },
				end: { zh: "尾部", en: "end" },
				nameGap: { zh: "名称与轴线距离", en: "nameGap" },
				nameRotate: { zh: "轴名旋转", en: "nameRotate" },
				inverse: { zh: "反向坐标轴", en: "inverse" },
				boundaryGap: { zh: "两边留白", en: "boundaryGap" },
				min: { zh: "轴刻度最小值", en: "min" },
				max: { zh: "轴刻度最大值", en: "max" },
				scale: { zh: "脱离0值比例", en: "scale" },
				splitNumber: { zh: "分割段数", en: "splitNumber" },
				minInterval: { zh: "最小间隔", en: "minInterval" },
				maxInterval: { zh: "最大间隔", en: "maxInterval" },
				interval: { zh: "分割间隔", en: "interval" },
				axisLine: { zh: "轴线", en: "axisLine" },
				onZero: { zh: "包含0刻度", en: "onZero" },
				symbol: { zh: "轴线箭头", en: "symbol" },
				symbolSize: { zh: "轴线箭头大小", en: "symbolSize" },
				symbolOffset: { zh: "轴线箭头偏移", en: "symbolOffset" },
				none: { zh: "无", en: "none" },
				arrow: { zh: "箭头", en: "arrow" },
				endArrow:{zh:"末端箭头",en:"endArrow"},
				axisTick: { zh: "轴刻度", en: "axisTick" },
				alignWithLabel: { zh: "刻度线和标签对齐", en: "alignWithLabel" },
				tickInterval: { zh: "刻度间隔", en: "tickInterval" },
				inside: { zh: "刻度是否朝内", en: "inside" },
				tickLength: { zh: "刻度长度", en: "tickLength" },
				axisLabel: { zh: "轴刻度", en: "axisTick" },
				axisTickLabel: { zh: "轴刻度标签", en: "axisTickLabel" },
				axisTickLabelInterval: {
					zh: "轴刻度标签间隔",
					en: "axisTickLabelInterval"
				},
				axisLabelInside: { zh: "刻度标签是否朝内", en: "axisLabelInside" },
				axisLabelRotate: { zh: "刻度标签旋转", en: "axisLabelRotate" },
				axisLabelMargin: { zh: "刻度标签与轴线距离", en: "axisLabelMargin" },
				splitLine: { zh: "分隔线", en: "splitLine" },
				splitLineInterval: { zh: "分隔线间隔", en: "splitLineInterval" },
				splitArea: { zh: "分隔区域", en: "splitArea" },
				splitAreaInterval: { zh: "分隔区域间隔", en: "splitAreaInterval" }
			},
			isShow: false,
			axis: {
				show: true,
				position: "",
				offset: 0,
				type: "category",
				name: "",
				nameLocation: "end",
				nameTextStyle: {},
				nameGap: 15,
				nameRotate: "",
				inverse: false,
				boundaryGap: true,
				min: "",
				max: "",
				scale: false,
				splitNumber: 5,
				minInterval: 0,
				maxInterval: "",
				interval: "",
				axisLine: {
					show: true,
					onZero: true,
					symbol: "none",
					symbolSize: [10, 15],
					lineStyle: {}
				},
				axisTick: {
					show: true,
					alignWithLabel: false,
					interval: "auto",
					inside: false,
					length: 5,
					lineStyle: {}
				},
				axisLabel: {
					show: true,
					interval: "auto",
					inside: false,
					rotate: 0,
					margin: 8
				},
				splitLine: {
					show: true,
					interval: "auto",
					lineStyle: {}
				},
				splitArea: {
					show: false,
					interval: "auto",
					areaStyle: {}
				}
			},
			originOption:'',
			isParse:false
		}),
		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();
				}
			},
			axis:{
				deep:true,
				handler(){
					if(this.isShow&&!this.isParse)
					this.$emit("axis-result",JSON.parse(JSON.stringify( [this.axis])));
				}
			}
		},
		methods: {
			onTextStyle(result) {
				this.axis.nameTextStyle = result;
			},
			onAxisLine(result) {
				this.axis.axisLine.lineStyle = result;
			},
			onAxisTick(result) {
				this.axis.axisTick.lineStyle = result;
			},
			onAxisLabel(result) {
				this.axis.axisLabel = result;
			},
			onSplitLine(result) {
				this.axis.splitLine.lineStyle = result;
			},
			onSplitArea(result) {
				this.axis.splitArea.areaStyle = result;
			},
			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.$emit("axis-result", JSON.parse(JSON.stringify([this.axis])));
				}
			},
			parseObj() {
				if (this.option instanceof Array && this.option.length == 1) {
					this.isParse=true;
					var option = this.option[0];
					for (var key in option) {
						this.axis[key] = option[key];
						
					}
					this.axis.type = this.axisType;
					this.originOption=JSON.stringify(this.axis);
					var that=this;
					setTimeout(() => {
						that.isParse=false;
					}, 100);
				}
				
			},
			colseOption() {
				this.isShow = false;
				var that=this;
				if (this.originOption!=JSON.stringify(this.axis)) {	
					setTimeout(function(){
						that.$emit("axis-result", [that.axis]);
					},50)
					
				}
			},
			listenEvent() {
				this.app.$on("close-option", this.colseOption);
			},
			offEvent() {
				this.app.$off("close-option", this.colseOption);
			}
		},
		mounted() {
			
			this.listenEvent();
		},
		beforeDestroy() {
			this.offEvent();
		}
	};
</script>
